<template>
  <!-- 专员弹窗 -->
  <UniPopup ref="attachPopup" :isMaskClick="false" @maskClick="handleMaskClick" >
    <view class="attach-info">
      <text class="title">活动咨询</text>
      <text class="desc">可通过以下电话咨询</text>
      <view class="attach-info_item_box">
        <template v-for="v in attacheVoList" :key="v.id">
          <view class="attach-info_item">
            <text class="attach-info_label">{{ v.userName }}</text>
            <text class="attach-info_phone" @click="callPhone(v.phonenumber)">
              {{ v.phonenumber }}
            </text>
          </view>
        </template>
      </view>
      <view class="btn" @click="handleMaskClick">关闭</view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import type { attacheVoItem } from '@/api/activity/types';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { propTypes } from '@/utils/propTypes';
  import { getCurrentInstance, watch, type PropType } from 'vue';

  const props = defineProps({
    visible: propTypes.bool.def(false),
    attacheVoList: Array as PropType<attacheVoItem[]>,
  });

  const emits = defineEmits(['update:visible']);

  watch(
    () => props.visible,
    (val) => {
      val ? openPopup('attachPopup') : closePopup('attachPopup');
    },
  );
  const _this = getCurrentInstance();

  const openPopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).open(direction);
  };

  const closePopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).close(direction);
  };

  function handleMaskClick() {
    emits('update:visible')
  }

  /** 拨打专员电话 */
  function callPhone(phoneNumber: string) {
    uni.makePhoneCall({ phoneNumber, fail: (err) => console.log(err) });
  }
</script>

<style lang="scss" scoped>
  .attach-info {
    box-sizing: border-box;
    width: 622rpx;
    border-radius: 32rpx;
    background-color: #fff;
    padding: 48rpx 48rpx 32rpx 48rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    .title {
      color: #333;
      text-align: center;
      font-size: 32rpx;
      font-weight: 400;
      line-height: 48rpx;
      font-weight: bold;
    }
    .desc {
      color: #333;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      margin: 24rpx 0 32rpx 0;
    }
    .attach-info_item_box {
      width: 100%;
      max-height: 400rpx;
      overflow-y: scroll;

      .attach-info_item {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        color: #333;
        padding: 24rpx 20rpx;
        background-color: #f7f8fa;
        margin-top: 20rpx;
        border-radius: 16rpx;
        font-weight: bold;
      }
      .attach-info_phone {
        color: #4a75ff;
      }
    }

    .btn {
      margin-top: 32rpx;
      box-sizing: border-box;
      display: flex;
      width: 100%;
      height: 72rpx;
      padding: 8px 0px;
      justify-content: center;
      align-items: center;
      border-radius: 32rpx;
      background: #2878ff;
      color: #fff;
      font-size: 28rpx;
    }
  }
</style>
